<template>
  <div>
    <bread class="filter">
      <h1>纵向项目导入与审核</h1>
      <span class="el-icon-arrow-right icon"></span>
      <span class="sub-title">批量导入</span>
    </bread>
    <pageContent hasFixedBottom>
      <el-table
        ref="multipleTable"
        :stripe="true"
        header-row-class-name="custom-table-header"
        :data="tableData3"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange">
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>
         <el-table-column
          label="序号"
          width="55">
          <template slot-scope="scope">{{ scope.row.index }}</template>
        </el-table-column>
        <el-table-column
          label="项目编号"
          width="120">
          <template slot-scope="scope">
            {{ scope.row.date }}
          </template>
        </el-table-column>
        <el-table-column
          prop="name"
          label="项目名"
          width="">
          <template slot-scope="scope">
            <el-tooltip class="item" effect="dark" :content="scope.row.name" placement="top">
              <span>{{ scope.row.name }}</span>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="已存在的项目导入后，系统将自动补充项目信息（已有信息、附件不会被覆盖）" placement="top">
              <span class="pro-has">已存在</span>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column
          prop="name"
          label="研究类型"
          width="120">
        </el-table-column>
        <el-table-column
          prop="name"
          label="基金名称"
          width="120">
        </el-table-column>
        <el-table-column
          prop="name"
          label="级别"
          width="120">
        </el-table-column>
        <el-table-column
          prop="name"
          label="资助类型"
          width="120">
        </el-table-column>
        <el-table-column
          prop="name"
          label="立项时间"
          width="120">
        </el-table-column>
        <el-table-column
          prop="name"
          label="预计结项时间"
          width="120">
        </el-table-column>
        <el-table-column
          prop="name"
          label="合同经费 （万元）"
          width="120">
        </el-table-column>
        <el-table-column
          label="主持人"
          width="120">
          <template slot-scope="scope">
            <i v-if="scope.row.name" class="el-icon-warning"></i>
            {{scope.row.name}}
          </template>
        </el-table-column>
        <el-table-column
          label="所属院系"
          width="">
          <template slot-scope="scope">
            <span v-if="scope.row.faculty.status === 0">{{scope.row.faculty.desc}}</span>
            <a v-else-if="scope.row.faculty.status === 1" class="curstorm_btn" href="javascript: void(0);" @click="selectHost">请选择项目主持人所属院系</a>
          </template>
        </el-table-column>
      </el-table>
    </pageContent>
    <bottom-fixed>
      <div class="pull-left">
        <span>返回上一步</span>
      </div>
      <div class="pull-right">
        <p>已选 8 项项目，其中<span class="reject">有项目需要确认主持人</span>
        </p><span class="pass" @click="pass">导入并审核通过</span>
      </div>
    </bottom-fixed>
    <el-dialog
      title="请确认项目主持人"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose">
      <div class="dialog_wrap custom-scrollbar" :class="[{'hover': scrollbarVisible}]" @scroll="paperScroll">
        <div class="list">
          <el-form ref="form" :model="form" label-width="80px">
            <el-form-item label="项目名">
              炎症过程中细胞间相互作用的信号转导机制及其应用研究
            </el-form-item>
            <el-form-item label="主持人">
              <el-select v-model="form.region" placeholder="请选择主持人">
                <el-option label="区域一" value="shanghai"></el-option>
                <el-option label="区域二" value="beijing"></el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </div>
        <div class="list">
          <el-form ref="form" :model="form" label-width="80px">
            <el-form-item label="项目名">
              炎症过程中细胞间相互作用的信号转导机制及其应用研究
            </el-form-item>
            <el-form-item label="主持人">
              <el-select v-model="form.region" placeholder="请选择主持人">
                <el-option label="区域一" value="shanghai"></el-option>
                <el-option label="区域二" value="beijing"></el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </div>
        <div class="list">
          <el-form ref="form" :model="form" label-width="80px">
            <el-form-item label="项目名">
              炎症过程中细胞间相互作用的信号转导机制及其应用研究
            </el-form-item>
            <el-form-item label="主持人">
              <el-select v-model="form.region" placeholder="请选择主持人">
                <el-option label="区域一" value="shanghai"></el-option>
                <el-option label="区域二" value="beijing"></el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </div>
        <div class="list">
          <el-form ref="form" :model="form" label-width="80px">
            <el-form-item label="项目名">
              炎症过程中细胞间相互作用的信号转导机制及其应用研究
            </el-form-item>
            <el-form-item label="主持人">
              <el-select v-model="form.region" placeholder="请选择主持人">
                <el-option label="区域一" value="shanghai"></el-option>
                <el-option label="区域二" value="beijing"></el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </div>
        <div class="list">
          <el-form ref="form" :model="form" label-width="80px">
            <el-form-item label="项目名">
              炎症过程中细胞间相互作用的信号转导机制及其应用研究
            </el-form-item>
            <el-form-item label="主持人">
              <el-select v-model="form.region" placeholder="请选择主持人">
                <el-option label="区域一" value="shanghai"></el-option>
                <el-option label="区域二" value="beijing"></el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </div>
        <div class="list">
          <el-form ref="form" :model="form" label-width="80px">
            <el-form-item label="项目名">
              炎症过程中细胞间相互作用的信号转导机制及其应用研究
            </el-form-item>
            <el-form-item label="主持人">
              <el-select v-model="form.region" placeholder="请选择主持人">
                <el-option label="区域一" value="shanghai"></el-option>
                <el-option label="区域二" value="beijing"></el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import scrollbar from 'mixins/scrollbar';
export default {
  name: 'hello',
  mixins: [scrollbar],
  data () {
    return {
      dialogVisible: false,
      scrollbarVisible: true, // 自定义滚动条
      form: {
        region: []
      },
      tableData3: [{
          index: 1,
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
          faculty: {
            desc: '力学院',
            status: 0
          }
        }, {
          index: 1,
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
          faculty: {
            desc: '力学院',
            status: 0
          }
        }, {
          index: 1,
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
          faculty: {
            desc: '力学院',
            status: 0
          }
        }, {
          index: 1,
          date: '2016-05-01',
          name: '炎症过程中细胞间相互作用的信号转导机制及其应用…',
          address: '上海市普陀区金沙江路 1518 弄',
           faculty: {
            desc: '力学院',
            status: 1
          }
        }, {
          index: 1,
          date: '2016-05-08',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
          faculty: {
            desc: '力学院',
            status: 2
          }
        }, {
          index: 1,
          date: '2016-05-06',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
          faculty: {
            desc: '力学院',
            status: 0
          }
        }, {
          index: 1,
          date: '2016-05-07',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
          faculty: {
            desc: '力学院',
            status: 0
          }
        }],
        multipleSelection: []




    }
  },
  methods: {
    selectHost(){
      this.dialogVisible = true
    },

    pass(){},
    selectHostMore(){},
    handleClose(){this.dialogVisible = false},
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    }
  },
  components: {
  }
};
</script>
<style scoped lang="scss">
  @import './index.scss';
</style>
